<extend name="layout/main" />

<block name="HEADER">
	<style>
		.btn-group{
			width: 300rpx;
			float: right;
			margin-right: 10px;
		}
		.container{
			width: 60%;
			min-width: 400px;
			margin: auto;
			padding: 20px 0;
			height: 90%;
			overflow: auto;
		}
		
		.time{
			height: 50px;
			line-height: 50px;
			position: relative;
			border: 1px solid #ccc;
			border-top: none;
		}
		.time:nth-child(1){
			border-top: 1px solid #ccc;
		}
		.time input{
			position: absolute;
			top: 50%;
			left:  20px;
			transform: translateY(-50%);
		}
		.time{
			text-align: center;
		}
		.time.head{
			background-color: #eee;
		}
	</style>
</block>

<block name="CONTENT">
	<div  class="wrapper">
		<div class="panel-heading">
			<control:search id="searchs" />
		</div>
		<div class="content">
			<div id="app" style="width: 60%;margin:0 auto;" v-cloak>
				<div v-show="show" class="layui-row">
					<div class="layui-col-sm3 layui-col-md3 layui-col-xs6" v-for="(item, index) in list">
						<div class="layui-card">
							<div class="layui-card-body layuiadmin-card-list">
								<div class="time head" v-if="index==0">
									<!-- <input class="time-check" :checked="check_0" type="checkbox" lay-skin="primary"> -->
									<span>早上</span>
								</div>
								<div class="time head" v-else-if="index==1">
									<!-- <input class="time-check" :checked="check_1" type="checkbox" lay-skin="primary"> -->
									<span>上午</span>
								</div>
								<div class="time head" v-else-if="index==2">
									<!-- <input class="time-check" :checked="check_2" type="checkbox" lay-skin="primary"> -->
									<span>下午</span>
								</div>
								<div class="time head" v-else="index==0">
									<!-- <input class="time-check" :checked="check_3" type="checkbox" lay-skin="primary"> -->
									<span>晚上</span>
								</div>
								<div class="time" v-for="(child, i) in item">
									<input class="time-check" :checked="active.indexOf(child)>=0" type="checkbox" :value="child" lay-skin="primary">
									
									<span>{{child}}</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>	
	</div>
</block>

<block name="FOOTER">
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script type="text/javascript">
		var page = (function(ns){
			
			var app = new Vue({
				el: '#app',
				data: {
					message: '',
					active: '',
					list: [],
					show: false
				},
				filters: {
					nameFilter(val){
						let arr = [ '早上', '上午', '下午', '晚上' ]
						return arr[val]
					}
				},
			})

			ns.checkAll=function(){
				let str = ''
		    	for( var i = 0; i < app.list.length; i++ ){
					str += app.list[i].join(',') + ','
				}
				app.active = str
		    }
			ns.cancelAll=function(){
				app.active = ''
		    }
			 //搜索事件
			ns.query=function(){
		    	let data = searchs.getData()
				let params = {}
				console.log(data)
				data.forEach(function(item){
					params[item.field] = item.value
				})
				app.show = false
				app.list = []
				$.ajaxs('/admin/v1/shop/getYyTime', params).then(function(res){ 
					if( res.code == 0 ){
						app.active = res.data
						app.list = [
							[ '00:30', '01:00','01:30','02:00','02:30','03:00','03:30','04:00','04:30','05:00','05:30','06:00' ],
							[ '06:30', '07:00','07:30','08:00','08:30','09:00','09:30','10:00','10:30','11:00','11:30','12:00' ],
							[ '12:30', '13:00','13:30','14:00','14:30','15:00','15:30','16:00','16:30','17:00','17:30','18:00' ],
							[ '18:30', '19:00','19:30','20:00','20:30','21:00','21:30','22:00','22:30','23:00','23:30','24:00' ]
						]
						app.show = true
					}
				})
		    }
			
		    //页面初始化
		    ns.init=function(){
				searchs.clickQuery();        
		    },
			ns.save=function(){
				console.log($('.time-check'))
				var arr = []
				var len = $('.time-check').length
				for( var i = 0; i < len; i++ ){
					let item = $('.time-check')[i]
					if( item.checked){
						arr.push(item.getAttribute('value'))
					}
				}

				var data = searchs.getData()
				var params = {}
				data.forEach(function(item){
					params[item.field] = item.value
				})
				params['time'] = arr.join(',')
				$.ajaxs('/admin/v1/shop/saveYyTime', params).then(function(res){ 
					$.toast(1,'保存成功');
				})
			}

		   

			return ns;
		}({}));
		
		
		$(function(){ page.init();  });

	</script>
</block>